<!--
 * @Author: 刘苗
 * @Description: 
 * @Date: 2021-08-24 15:53:43
-->
<template>
  <div style="padding: 25px">
    <div id="container"></div>

    <div class="funtion_container" style="margin-top: 20px">
      <div>
        <el-button type="primary" size="default" @click="handleDot"
          >标点</el-button
        >
        <el-input
          v-model="wd"
          placeholder="请输入纬度"
          size="normal"
          style="width: 200px"
        ></el-input>
        <el-input
          v-model="jd"
          placeholder="请输入经度"
          size="normal"
          style="width: 200px"
        ></el-input>
      </div>
      <div>
        <el-button type="primary" size="smal" @click="handleWalkStart"
          >轨迹动画-开始</el-button
        >
        <el-button type="primary" size="smal" @click="handleWalkStop"
          >轨迹动画-暂停</el-button
        >
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      map: null,
      jd: null,
      wd: null,
      dotlist: [
        {
          id: 1,
          wd: 112.941076,
          jd: 28.231951,
          title: "标题一",
        },
        {
          id: 2,
          wd: 112.9474,
          jd: 28.231888,
          title: "标题二",
        },
      ],
      trackAni: null,
    };
  },
  mounted() {
    // 创建地图实例
    var map = new BMapGL.Map("container");
    this.map = map;
    // 设置中心点坐标
    var point = new BMapGL.Point(116.420501, 39.910881);
    //地图初始化，同时设置地图展示级别
    this.map.centerAndZoom(point, 14);
    // ip定位
    function myFun(result) {
      var cityName = result.name;
      map.setCenter(cityName);
      alert("当前定位城市:" + cityName);
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun);

    // 开启缩放
    this.map.enableScrollWheelZoom(true);
    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    this.map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
    this.map.addControl(zoomCtrl);

    // 创建城市选择控件
    var cityControl = new BMapGL.CityListControl({
      // 控件的停靠位置（可选，默认左上角）
      anchor: BMAP_ANCHOR_TOP_LEFT,
      // 控件基于停靠位置的偏移量（可选）
      offset: new BMapGL.Size(10, 5),
    });
    // 将控件添加到地图上
    this.map.addControl(cityControl);
    var navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件
    this.map.addControl(navi3DCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
    this.map.addControl(zoomCtrl);

    // 初始化标点
    this.dotlist.forEach((el) => {
      var marker1 = new BMapGL.Marker(new BMapGL.Point(el.wd, el.jd),{
         icon:new BMapGL.Icon(require("./bycle.png"), new BMapGL.Size(26, 26))
      });
      this.map.addOverlay(marker1);
      marker1.addEventListener("click", this.handleClickDot);
    });




    // 绘制区域
    const areaList = [
      {
        name: "区域1",
        color: "#000000",
        list: [
          { jd: 112.960947, wd: 28.225331 },
          { jd: 112.955413, wd: 28.223263 },
          { jd: 112.964288, wd: 28.222594 },
        ],
      },
      {
        name: "区域2",
        color: "#f52836",
        list: [
          { jd: 112.959258, wd: 28.222658 },
          { jd: 112.947292, wd: 28.215719 },
          { jd: 112.963426, wd: 28.204451 },
        ],
      },
      {
        name: "区域3",
        color: "#51b5ff",
        list: [
          { jd: 112.911971, wd: 28.233033 },
          { jd: 112.934321, wd: 28.233924 },
          { jd: 112.920235, wd: 28.218266 },
        ],
      },
    ];
    areaList.forEach((el) => {
      this.renderArea(el);
    });
  },

  methods: {
    // 地图渲染
    renderArea(el) {
      const arr = [];
      el.list.forEach((item) => {
        arr.push(new BMapGL.Point(item.jd, item.wd));
        var polygon = new BMapGL.Polygon(arr, {
          strokeColor: el.color,
          fillColor: el.color,
          strokeWeight: 2,
          strokeOpacity: 0.5,
          icon:new BMapGL.Icon(require("./bycle.png"), new BMapGL.Size(26, 26))
        });
        this.map.addOverlay(polygon);
      });
    },
    // 轨迹动画
    handleWalkStart() {
      var path = [
        {
          lng: 112.941435,
          lat: 28.231442,
        },
        {
          lng: 112.941004,
          lat: 28.21922,
        },
        {
          lng: 112.954623,
          lat: 28.218361,
        },
        {
          lng: 112.965007,
          lat: 28.215083,
        },
        {
          lng: 112.971008,
          lat: 28.231347,
        },
        {
          lng: 112.992998,
          lat: 28.233638,
        },
      ];
      var point = [];
      for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
      }



      var pl = new BMapGL.Polyline(point);
      this.trackAni = new BMapGLLib.TrackAnimation(this.map, pl, {
        overallView: true, // 动画完成后自动调整视野到总览
        tilt: 30, // 轨迹播放的角度，默认为55
        duration: 10000, // 动画持续时长，默认为10000，单位ms
        zoom: 14,
        // delay: 000, // 动画开始的延迟，默认0，单位ms
      });
      this.trackAni.start();
    },
    handleWalkStop() {
      this.trackAni.cancel();
    },
    handleDot() {
      var marker1 = new BMapGL.Marker(new BMapGL.Point(this.wd, this.jd));
      this.map.addOverlay(marker1);
    },
    handleClickDot(e) {
      console.log(e);
      alert("经度:" + e.latLng.lat, "纬度:" + e.latLng.lng);
    },
  },
};
</script>



<style lang="scss" scoped>
#container {
  border: 1px solid red;
  width: 100%;
  height: 600px;
}
.funtion_container {
  display: flex;
  flex-direction: row;
  div {
    margin-right: 20px;
  }
}
</style>